<template>
    <el-drawer title="查看被踢点位" :model-value="modelValue" :size="1200" @closed="handleClose">
        <XcTable id="xc-table" height="100%" :loading="tableLoading" :data="tableData" :columns="tableColumns">
        </XcTable>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">关闭</el-button>
                <el-button :loading="clearLoading" @click="handleClear">清空</el-button>
                <el-button
                    v-if="planDetail.planStatus !== ProgramType.ENSURE"
                    type="primary"
                    plain
                    :loading="coverLoading"
                    :disabled="!tableData.length"
                    @click="handlePick"
                >
                    补回点位
                </el-button>
                <el-button type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
            </span>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, onMounted } from 'vue';
import XcTable from '@x-tech/fe-pc-components/src/components/XcTableTemplate/XcTable.vue';
import { getKickedList, exportKickedList, clearKickedList, getCoverList } from '@/api/plan.ts';
import { exportFormBlob } from '@/utils/common';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ProgramType } from '../programType.ts';

const emits = defineEmits<{ (e: 'update:modelValue', visible: boolean): void; (e: 'success'): void }>();
const tableLoading = ref(false);
const exportLoading = ref(false);
const clearLoading = ref(false);
let tableData = ref([]);
const tableColumns = [
    { label: '被踢时间', key: 'kickTime', prop: { width: 260, fixed: 'left' } },
    { label: '点位编码', key: 'code', prop: { width: 260, fixed: 'left' } },
    { label: '物业类型', key: 'premisesType', prop: { width: 200 } },
    { label: '物业名称', key: 'premisesName', prop: { width: 200 } },
    { label: '楼栋名称', key: 'buildingName', prop: { width: 200 } },
    { label: '单元名称', key: 'unitName', prop: { width: 200 } },
    { label: '电梯名称', key: 'elevatorName', prop: { width: 200 } },
    { label: '行政区域', key: 'area', prop: { width: 200 } },
    { label: '设备尺寸', key: 'pointSize', prop: { width: 200 } },
    { label: '位置属性', key: 'location', prop: { width: 200 } },
    { label: '被踢原因', key: 'reason', prop: { width: 200 } },
    { label: '补回失败原因', key: 'coverFail', prop: { width: 200 } },
];
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    planDetail: {
        type: Object,
        default: () => null,
    },
});
const handleClose = () => {
    emits('update:modelValue', false);
};

const handleGetTableData = async () => {
    const data = (await getKickedList({ planId: props.planDetail.planId })) || [];
    tableData.value = data;
};

const handleExport = async () => {
    exportLoading.value = true;
    try {
        const { file, fileName } = await exportKickedList({ planId: props.planDetail.planId });
        exportFormBlob(file, fileName);
    } finally {
        exportLoading.value = false;
    }
};
const handleClear = async () => {
    await ElMessageBox.confirm('确认清空所有被踢点位？', '提示', {
        type: 'warning',
        confirmButtonText: '确认',
        cancelButtonText: '取消',
    });
    clearLoading.value = true;
    try {
        await clearKickedList({ planId: props.planDetail.planId });
        ElMessage.success('操作成功！');
        handleGetTableData();
    } finally {
        clearLoading.value = false;
    }
};

onMounted(() => handleGetTableData());

const submit = async () => {
    const params = {
        planId: props.planDetail.planId,
        pointCodeList: textarea.value.split(/[(\r\n)\r\n]+/).filter((code) => code),
    };
    if (type.value === 'kickOutPoint') {
        await kickOutPoint(params);
    } else {
        await addPoint(params);
    }
    // await preorder(params);
    handleClose();
    emits('success');
};
const coverLoading = ref(false);
// 补回点位
const handlePick = async () => {
    coverLoading.value = true;
    try {
        const res = await getCoverList({ planId: props.planDetail.planId });
        ElMessage.success('操作成功！');
    } catch (e) {
        console.log('e');
    } finally {
        coverLoading.value = false;
        // handleClose();
        handleGetTableData();
        emits('success');
    }
};
</script>

<style lang="scss" scoped>
.xc-table {
    height: 100%;
}
</style>
